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<!DOCTYPE html>
<meta name="theme-color" content="#666">
<html>
<head>
<title>RADIO-MAROC</title>
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />
<meta charset = "utf-8" />
<style>
body{
position: relative;
background-color: #666;
}
ul {
list-style-type: none;
margin: 0;
padding: 4px;
height: 70%;
overflow: hidden;
background-color: #666;
position: center;
}
#media {
position: fixed;
top: 5px;
padding: 6px;
width: 300px;
height: 60px;
}
a {
font-size:100%;
color: #222;
line-height: 45px;
font-family: Andale Mono, monospace;
text-decoration: none;
font-weight:bold;
}
.btn {
float: left;
margin-top: 7px;
margin-right: 7px;
background-color: #cef5af;
border-left: 4px solid #cef5af;
width: 140px;
height: 50px;
text-align: center;
border-radius: 4px;
padding: 10px;
}
.active, .btn:hover
{
background-color: #cef5af;
border-left: 4px solid #25d366;
background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);
}
.active {color:#5DB0E6;text-decoration:none;}
</style>
</head>
<body>
<div>
<div id="container">
<ul id="playlist">
<a class="btn"><li>??</li></a>
<a href="http://medradio-maroc.ice.infomaniak.ch/medradio-maroc-64.mp3" onclick="loadSong()"><li class="btn">MED RADIO</li></a>
<a href="http://broadcast.infomaniak.net/chadafm-high.mp3" onclick="loadSong()"><li class="btn">CHADA FM</li></a>
<a href="http://streaming08.mit.ovea.com/medi1" onclick="loadSong()"><li class="btn">MEDI 1</li></a>
<a href="http://radiomars.ice.infomaniak.ch/radiomars-128.mp3" onclick="loadSong()"><li class="btn">RADIO MARS</li></a>
<a href="http://broadcast.ice.infomaniak.ch/aswat-high.mp3" onclick="loadSong()"><li class="btn">ASWAT</li></a>
<a href="http://icepe10.infomaniak.ch/hitradio-maroc-128.mp3" onclick="loadSong()"><li class="btn">HIT RADIO</li></a>
<a href="http://newpub-stream01.itols.com:9001/casa.ogg" onclick="loadSong()"><li class="btn">CASA</li></a>
<a href="https://montecarlodoualiya128k.ice.infomaniak.ch/mc-doualiya.mp3" onclick="loadSong()"><li class="btn">MONTE CARLO</li></a>
<a href="https://radio2m-i.akamaihd.net/hls/live/624355/radio2m/playlist-128000.m3u8" onclick="loadSong()"><li class="btn">RADIO 2M</li></a>
<a href="http://68.168.117.130:8000/stream/1.mp3/" onclick="loadSong()"><li class="btn">ATLANTIC</li></a>
<a href="http://radiosoleil.ice.infomaniak.ch/radiosoleil-96.mp3" onclick="loadSong()"><li class="btn">RADIO SOLEIL</li></a>
<a href="http://broadcast.infomaniak.net/onlyrai-high.mp3" onclick="loadSong()"><li class="btn">ONLY RAI</li></a>
<a onclick="loadSong()"><a href="http://185.52.127.157/ma/55820/mp3_128.mp3"><li class="btn">NRJ RADIO</li></a>
<a onclick="loadSong()"><a href="http://cdnamd-hls-globecast.akamaized.net/live/ramdisk/radio_fes/hls_snrt_radio/radio_fes-video=100000-audio_AACL_qad_130400_110=130400.m3u8"><li class="btn">FES RADIO</li></a>
</ul>
</div>
</div>
<br>
<div style="width:100%; margin:0 auto;">
<audio autoplay tabindex="0" id="player" controls="controls">
<source src="http://streaming08.mit.ovea.com/medi1" type="audio/mp3">
</audio>
</div>
</body>
<script>
function loadSong(elt, e) {
if(!e) var e = window.event;
document.getElementById("player").src=elt.href;
document.getElementById("player").load();
document.getElementById("player").play();
return false;
}
window.onload = function() {
links = document.getElementById("playlist").getElementsByTagName("a");
for(var i = 0; i<links.length; i++) {
links[i].onclick=function(e) { return loadSong(this, e); };
}
}
</script>
<script>
// Add active class to the current button (highlight it)
var header = document.getElementById("playlist").getElementsByTagName("a");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
</html>
